<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>jsx语法规则</title>
		<style>
			.demo{
				background-color: skyblue;
			}
		</style>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//准备一个数据
			const schoolName = 'AtGuIgU'
			//第一步：创建虚拟DOM
			const VDOM = (
				<div>
					<h1 className="demo">
						<span style={{color:'red',fontSize:'50px'}}>{schoolName.toLowerCase()}</span>
					</h1>
					<p>123</p>
					<input type="text"/>
					{/*<Good>456</Good> 此行代码会报错，因为我们没有定义过Good组件*/}
					{/*<good>456</good> 此行代码会有警告，因为html中无同名元素*/}
				</div>
			)
			//第二步：渲染虚拟DOM到页面
			ReactDOM.render(VDOM,document.getElementById('test'))

			/* 
				jsx的语法规则：
						1.创建虚拟DOM的时候，不要用引号；
						2.结构中混入js表达式的时候，要使用{}包裹；
						3.指定样式类名的时候，不要用class，要用className
						4.指定内联样式的时候，要这样写：style={{color:'red'}}，多个单词组成的要用小驼峰
						5.所有结构必须要有根标签
						6.所有标签必须闭合
						7.标签首字母：
								1.若标签首字母是小写的，则将其转换为html中的同名元素。若html中无同名元素，则报错。
								2.若标签首字母是大写的，则去寻找对应的组件，若找到了，则渲染该组件，若未找到，则报错。
			*/
		</script>
	</body>
</html>